<template>
  <!-- 编辑请款单-->
  <a-modal :width="1200" v-model:visible="showAddBill" top="8vh" title="编辑请款单" :ok-loading="submitLoading" title-align="start" :mask-closable="false" @cancel="closedDialog" :on-before-ok="submitData">
    <div class="pay-list-w">
      <AddPayrollRequisitionItem v-if="showItem" ref="myComponentRefs" :supplierAccounts="supplierAccounts" :userList="userList" :detail="detailInfo" />
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getSupplierInfo, updatePaymentOrder, getPaymentOrderInfo } from '@/api/purchase'
  import useBaseDataStore from '@/store/modules/base-data'
  import AddPayrollRequisitionItem from './addPayrollRequisitionItem.vue'

  onMounted(async () => {
    getUserList()
    await setDefaultList()
    showItem.value = true
  })

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentId: {
      type: String,
    },
  })
  const detailInfo = ref<any>({})
  const showItem = ref(false)

  const myComponentRefs = ref()
  const showAddBill = ref(props.isShow)
  const submitLoading = ref(false)
  const useBaseData = useBaseDataStore()
  const userList = ref<Array<any>>([])
  const supplierAccounts = ref<Array<any>>([])

  // 获取所有用户列表
  async function getUserList() {
    await useBaseData.getUserList()
    userList.value = useBaseData.userList
  }
  // 初始化数据
  async function setDefaultList() {
    const res: any = await getPaymentOrderInfo({ id: props.currentId })
    detailInfo.value = res?.data || []
    if (detailInfo.value.requestUid) {
      detailInfo.value.user = {
        id: detailInfo.value.requestUid,
        userName: detailInfo.value.requestUname,
      }
    }
    if (detailInfo.value.supplierAccountId) {
      detailInfo.value.payeeInfo = {
        id: detailInfo.value.supplierAccountId,
        account: detailInfo.value.account,
        payee: detailInfo.value.payee,
        type: detailInfo.value.type,
        bank: detailInfo.value.bank,
      }
    }
    detailInfo.value.orderPoolParams = detailInfo.value.paymentPoolVOList.map((el: any) => {
      return {
        ...el,
        requestPrice: el.currentRequestAmount,
        unRequestAmount: el.unRequestAmount + el.currentRequestAmount,
      }
    })
    if (detailInfo.value.supplierId) {
      getSuppilerInfo(detailInfo.value.supplierId)
    }
  }
  // 获取供应商收款方信息列表
  async function getSuppilerInfo(supplierId: string) {
    const res: any = await getSupplierInfo({ id: supplierId })
    supplierAccounts.value = res?.data?.supplierAccounts || []
  }

  // 确认
  async function submitData() {
    let valid = await myComponentRefs.value.validateData()
    if (!valid) return false
    let _detailInfo = myComponentRefs.value.detailInfo
    let orderCreateParams = {
      id: _detailInfo.id,
      gmtExpectedPayment: _detailInfo.gmtExpectedPayment,
      account: _detailInfo.payeeInfo?.account,
      bank: _detailInfo.payeeInfo?.bank,
      payee: _detailInfo.payeeInfo?.payee,
      type: _detailInfo.payeeInfo?.type,
      requestUid: _detailInfo.user?.id,
      requestUname: _detailInfo.user?.userName,
      settleType: _detailInfo.settleType,
      supplierAccountId: _detailInfo.payeeInfo?.id,
      supplierId: _detailInfo.supplierId,
      supplierName: _detailInfo.supplierName,
      supplierCode: _detailInfo.supplierCode,
      urgentStatus: _detailInfo.urgentStatus,
      attachment: _detailInfo.attachment,
      remark: _detailInfo.remark,
      orderPoolParams: _detailInfo.orderPoolParams?.map((el: any) => {
        return {
          requestAmount: el.requestPrice,
          paymentPoolId: el.id,
        }
      }),
    }

    const res = await updatePaymentOrder(orderCreateParams)
    if (!res) return false
    Message.success('添加成功')
    emit('success')
    closedDialog()
  }
  // 关闭
  function closedDialog() {
    showAddBill.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .pay-list-w {
    height: calc(84vh - 160px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .pay-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .payeeInfo {
    font-size: 12px;
    margin-left: 10px;
    .label {
      color: #999;
    }
  }
  .total-w {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    p {
      font-weight: bold;
      text-align: right;
      margin-left: 30px;
    }
    .label {
      color: #999;
      font-weight: normal;
    }
  }
</style>
